https://discord.umbraco.com logo
Join Discord
Powered by
Can Our.Umbraco.Gmaps be used in custom section of...
# help-with-umbraco
m
I need to use a google map to allow users to place a marker in a map and then lat and long will be saved to the database. Previous u7 version used Gmaps - think it was by netaddicts? I was trying to use the Our.Umbraco.Gmaps package. The map appears and uses the default coords as set up in appsettings. If there are coords present in the database they are available in the page along with all other fields etc but we can't get them to appear on the map. Then if we place or move a marker we can't get it to save to the db. So the map does not seem to be communicating with the editcontroller.js. It's more than likely something I'm doing wrong but I thought I'd ask before I tried any more. All other fields are saving and editing correctly. It's not down to the SQL/C# etc - I can trace the lack of progress in the JS end of things. Thanks.
editcontroller.js (partial):
Copy code
var id = $routeParams.create ? 0 : $routeParams.id;
        dealerResource.getBranchById(id).then(function (response) {
            $scope.branch = response.data;
            if ($routeParams.create) {
                $scope.branch.dbr_dlrId = $routeParams.id;
            } 
         
            $scope.address = {
                coordinates: {
                    lat: $scope.branch.dbr_latitude,
                    lng: $scope.branch.dbr_longitude,
                    postalcode: $scope.branch.dbr_postcode,
                    full_address: $scope.GetAddress()
                },
            };
            alert("address lat" + $scope.address.coordinates.lat); //these now have the coordinates from the database
            alert("address long" + $scope.address.coordinates.lng); // but the map doesn't reflect this 
            $scope.properties = [
                {
                    label: 'Location',
                    description: 'Drag pin to refine location',
                    view: '/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html',
                    config: {
                    },
                    value: {
                        coordinates: {
                            lat: $scope.address.coordinates.lat,
                            lng: $scope.address.coordinates.lng
                        }
                    }
                }
            ];


            $scope.loaded = true;
            editorState.set($scope.branch);
maps.editor.html:
Copy code
<div class="umb-property-editor our-coremaps" ng-class="{'our-coremaps--loading': showLoader}" ng-controller="GMapsMapsController as vm">

    <div class="our-coremaps__area">
        <input type="text" class="our-coremaps__autocomplete umb-property-editor umb-textstring textstring" placeholder="Type name, address or geolocation" ng-model="searchedValue" />

        <div class="our-coremaps__coordinates">
            <span>PinB:</span> <span>{{address.coordinates.lat}},{{address.coordinates.lng}}</span><br />
            <span>Center:</span> <span>{{mapCenter.lat}},{{mapCenter.lng}}</span>
        </div>
    </div>

    <div class="our-coremaps__canvas"></div>

    <umb-load-indicator ng-show="showLoader">
    </umb-load-indicator>

    <div ng-show="error">{{ error }}</div>
</div>
d
Hi there! you should be able to use the gmaps plugin in a custom section. In fact, you should be able to use any property editor in your custom section. Usually you'd use the 
<umb-property>
and the 
<umb-property-editor>
directives for that. I have no example ready at the moment, but if you search for these tags in the Umbraco source on github, then you should be able to find some.
You have to pass an object to these directives that looks very similar to the property editor configuration in the package.manifest of the gmaps plugin. I think you can actually just copy/paste that configuration from package.manifest into a javascript variable as a starting point
m
Thanks for getting back to me. So if this is the package.manifest:
Copy code
"propertyEditors": [
    {
      "alias": "Our.Umbraco.GMaps",
      "name": "Google Maps Single Marker",

      "icon": "icon-map-location",
      "group": "Rich Content",
      "editor": {
        "view": "~/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html",
        "valueType": "JSON"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Google API Key",
            "description": "Your Google Maps API Key",
            "key": "apikey",
            "view": "textstring"
          },
          {
            "label": "Default coordinates",
            "description": "The coordinates (lat, long) of the centre this map will show. Example: 52.379189, 4.899431",
            "key": "location",
            "view": "textstring"
          },
          {
            "label": "Default zoom",
            "description": "The default zoom level of the map. Defaults to 17",
            "key": "zoom",
            "view": "number"
          },
and this is what I have in my editcontroller.js:
Copy code
$scope.properties = [
                {
                    label: 'Location',
                    description: 'Drag pin to refine location',
                    view: '/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html',
                    config: {
                    },
                    value: {
                        coordinates: {
                            lat: $scope.address.coordinates.lat,
                            lng: $scope.address.coordinates.lng
                        }
                    }
                }
            ];
Are you saying I need to change that whole section to match the package.manifest?
So maybe something like change value to location? And combine the lat and long into one string?
Copy code
$scope.properties = [
                {
                    label: 'Location',
                    description: 'Drag pin to refine location',
                    view: '/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html',
                    config: {
                    },
                    location: {                        
                             $scope.address.coordinates.lat,  $scope.address.coordinates.lng                        
                    }
                }
            ];
d
Ah, no I think the object you had first was more accurate. The way you use the directives seems off though. Usually you'd have something like this:
Copy code
<umb-property property="vm.myproperty">
    <umb-property-editor model="vm.myproperty">
    </umb-property-editor>
</umb-property>
Then 
vm.myproperty
is the object with label, description, view, config and value.
You likely need to fill the config object with some values, but I don't know what the values exactly are. They should correspond with the fields that you configure when creating a datatype with gmaps
m
I do have that: in an edit.html file. There is edit.html and edit.controller.js and then there is also the gmaps maps.editor.html file Maybe I need to put vm.property in the edit.html directives. I have managed to kill my site locally so can't test this right now but maybe it's something to try. Thanks!
8 Views
PreviousNext
Powered by